<template>
  <div class="device-count-card" :style="{ backgroundColor: bgColor }">
      <!-- 标题组件 -->
      <Title :title="title"></Title>

      <!-- 设备总数显示 -->
      <div class="device-count-content">
          <div class="total-count">
              <span class="count-number">{{ totalDevices }}</span>
              <span class="count-label">设备总数</span>
          </div>

          <!-- 图表容器（保留以备后用） -->
          <div ref="chartContainer" style="height: 10px;"></div>
      </div>
  </div>
</template>

<script>
import { get } from '@/utils/request';

export default {
  props: {
      // 允许父组件自定义背景颜色
      bgColor: {
          type: String,
          default: '#ffcfcf'
      },
      // 允许自定义标题
      title: {
          type: String,
          default: '设备统计'
      }
  },
  data() {
      return {
          totalDevices: 0,
          empData: []
      };
  },
  methods: {
      // 获取设备数据
      async getDeviceData() {
          try {
              const res = await get('/dashboard/queryDeviceOnlineNumber');
              console.log('设备数据响应:', res);
              this.empData = res.data;
              // 计算设备总数
              this.totalDevices = this.empData.reduce((sum, item) => sum + item.value, 0);
          } catch (error) {
              console.error('获取设备数据失败:', error);
              // 这里假设 $message 是 Vue 项目中使用的消息提示组件，若没有可替换为 console 提示
              this.$message.error('获取设备数据失败，请稍后重试');
          }
      }
  },
  async mounted() {
      await this.getDeviceData();
  }
};
</script>

<style lang="less" scoped>
.device-count-card {
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;

  &:hover {
      box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.2);
      transform: translateY(-2px);
  }

  .device-count-content {
      margin-top: 15px;
      text-align: center;

      .total-count {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          height: 120px;

          .count-number {
              font-size: 48px;
              font-weight: bold;
              color: #1890ff;
              line-height: 1;
          }

          .count-label {
              margin-top: 10px;
              font-size: 16px;
              color: #666;
          }
      }
  }
}
</style>